<!--
 * @Author: g05047
 * @Date: 2022-02-17 18:36:52
 * @LastEditors: g05047
 * @LastEditTime: 2022-02-24 15:42:58
 * @Description: file content
-->
<template>
  <div class="page">
    <go-back v-if="$route.query.isLink"></go-back>
    <div>
      <h2>接触进口冷链食品核酸采集信息列表</h2>
    </div>
    <!-- 查询条件 -->
    <el-row :gutter="10" style="margin: 20px 0px">
      <el-col :span="25">
        <el-date-picker
          v-model="selectedDate"
          type="daterange"
          size="small"
          width="100%"
          range-separator="—"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :clearable="false"
          @change="handelChangeDate"
        >
        </el-date-picker>
      </el-col>
      <el-col :span="2">
        <el-select
          size="small"
          v-model="queryParam.areaCode"
          placeholder="地区"
        >
          <el-option
            v-for="item in areaOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-cascader
          :options="statusOptions"
          v-model="bodyindustryStr"
          size="small"
          :props="{ checkStrictly: true }"
          placeholder="请选择单位业态"
          clearable
          @change="onBodyIndustryStr"
        >
        </el-cascader>
      </el-col>
      <el-col :span="4">
        <el-select
          size="small"
          v-model="queryParam.status"
          placeholder="核酸采样填报"
          clearable
        >
          <el-option
            v-for="item in collectionOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row :gutter="10" style="margin: 20px 0px">
      <el-col :span="3">
        <el-input
          maxlength="50"
          size="small"
          v-model="queryParam.searchOne"
          placeholder="人员姓名/手机号码"
          clearable
        ></el-input>
      </el-col>
      <el-col :span="5">
        <el-input
          maxlength="50"
          size="small"
          v-model="queryParam.searchTwo"
          placeholder="企业单位名称/统一社会信用代码"
          clearable
        ></el-input>
      </el-col>
      <el-col :span="4">
        <el-cascader
          clearable
          placeholder="请选择标签类别"
          size="small"
          v-model="categoryStr"
          :options="bodyindustryList"
          @change="onCascaderChange"
          :props="{
            checkStrictly: true,
          }"
        ></el-cascader>
      </el-col>
      <el-col :span="4">
        <el-select
          v-model="queryParam.tabelStatus"
          clearable
          size="small"
          placeholder="请选择单位状态"
        >
          <el-option label="接触进口冷链食品" value="0"></el-option>
          <el-option label="暂不经营进口冷链食品" value="1"></el-option>
        </el-select>
      </el-col>
      <el-col :span="2">
        <el-select
          v-model="queryParam.samplingTypeStr"
          :clearable="false"
          size="small"
        >
          <el-option label="数据来源" value="0"></el-option>
          <el-option label="手工填报" value="1"></el-option>
          <el-option label="系统同步" value="2"></el-option>
        </el-select>
      </el-col>
      <el-col :span="3" class="btn">
        <el-button type="primary" size="small" @click="handleQuery">
          查询
        </el-button>
        <el-button size="small" @click="handelExport" :loading="exportLoading">
          导出
        </el-button>
      </el-col>
    </el-row>

    <!-- 采样表格数据 -->
    <el-table border stripe :data="tableData" style="width: 100%">
      <el-table-column
        prop="districtStreet"
        label="区域名称"
        align="center"
        width="120"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="bodyindustry"
        label="单位业态"
        align="center"
        show-overflow-tooltip
        width="220px"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.bodyindustryremarks">
            {{ scope.row.bodyindustry }}--{{ scope.row.bodyindustryremarks }}
          </div>
          <div v-else>
            {{ scope.row.bodyindustry }}
          </div>
        </template>
      </el-table-column>
        <el-table-column
        prop="categoryOne"
        label="单位标签"
        align="center"
        width="180px"
      >
              <template slot-scope="scope">
          <span v-if="!scope.row.categoryOne">--</span>
          <span v-else-if="scope.row.categoryOne == scope.row.categoryTwo">{{
            scope.row.categoryOne
          }}</span>
           <span v-else-if="scope.row.categoryTwo">{{
            scope.row.categoryOne + "--" + scope.row.categoryTwo
          }}</span>
          <span v-else>{{
            scope.row.categoryOne 
          }}</span>
        </template>
        </el-table-column>
      <el-table-column
        prop="unitName"
        label="单位名称"
        align="center"
        show-overflow-tooltip
        width="250px"
      >
      </el-table-column>
      <el-table-column
        prop="planneddate"
        label="计划日期"
        align="center"
        show-overflow-tooltip
        width="100px"
      >
      </el-table-column>
      <el-table-column
        prop="samplingType"
        label="数据来源"
        align="center"
        show-overflow-tooltip
        width="140px"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.samplingTypeStr == 2||scope.row.samplingTypeStr==3" class="green">
            {{ scope.row.samplingType }}
          </div>
          <div v-else-if="scope.row.actualdate == ''">--</div>
          <div v-else>{{ scope.row.samplingType }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="actualdate"
        label="采样日期"
        align="center"
        show-overflow-tooltip
        width="170px"
      >
        <template slot-scope="scope">
          <div>
            {{ scope.row.actualdate || "--" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="samplingpoint"
        label="采样点"
        align="center"
        show-overflow-tooltip
        width="170px"
      >
        <template slot-scope="scope">
          <span>
            {{
              scope.row.samplingpoint === "" ? "--" : scope.row.samplingpoint
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="thename"
        label="姓名"
        align="center"
        show-overflow-tooltip
        width="180"
      >
         <template slot-scope="scope">
          <span v-if="scope.row.plLabel">{{scope.row.thename}}({{scope.row.plLabel}})</span>
          <span v-else>{{scope.row.thename}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="mobile"
        label="手机号"
        align="center"
        show-overflow-tooltip
        width="100px"
      >
      </el-table-column>
      <!-- <el-table-column
        prop="streetName"
        label="采样区域街道"
        align="center"
        show-overflow-tooltip
        width="110px"
      >
      </el-table-column> -->
      <el-table-column
        prop="informantTime"
        label="填报日期"
        align="center"
        show-overflow-tooltip
        width="170px"
      >
        <template slot-scope="scope">
          <span>
            {{
              scope.row.informantTime === "" ? "--" : scope.row.informantTime
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="informant"
        label="填报者"
        align="center"
        show-overflow-tooltip
        width="70px"
      >
        <template slot-scope="scope">
          <span>
            {{ scope.row.informant === "" ? "--" : scope.row.informant }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="核酸采样填报"
        align="center"
        show-overflow-tooltip
        width="110px"
      >
        <template slot-scope="scope">
          <span
            :class="scope.row.status.indexOf('如期') !== -1 ? 'green' : 'red'"
          >
            {{ scope.row.status }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="reasondelay"
        label="延期原因"
        align="center"
        show-overflow-tooltip
        width="150px"
      >
        <template slot-scope="scope">
          <span>
            {{ scope.row.reasondelay === "" ? "--" : scope.row.reasondelay }}
          </span>
        </template>
      </el-table-column>

      <!-- <el-table-column
        prop="smsReminderTotal"
        label="短信提醒"
        align="center"
        show-overflow-tooltip
        width="80px"
      >
      </el-table-column> -->

      <el-table-column
        fixed="right"
        label="操作"
        align="center"
        show-overflow-tooltip
        width="120"
      >
        <template slot-scope="scope">
          <!-- <el-button size="mini" @click="handelView(scope.row)">查看</el-button> -->
          <el-button size="mini" type="primary" @click="handelView(scope.row)"
            >查看详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 采样分页 -->
    <el-pagination
      style="float: right; margin-top: 20px"
      @current-change="changeCurrentPage"
      :page-size="queryParam.pageSize"
      :current-page.sync="queryParam.pageIndex"
      background
      layout="total, prev, pager, next"
      :total="listTotal"
      v-if="listTotal > 0"
    >
    </el-pagination>

    <!-- 单个人员的采集信息弹窗 -->
    <el-dialog
    :destroy-on-close="true"
      :visible.sync="singleCollectionInfoDialogVisible"
      width="50%"
      :close-on-click-modal="false"
    >
      <SingleCollectionInfo :personCollectionInfo="singleCollectionInfo" v-if="singleCollectionInfoDialogVisible" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="singleCollectionInfoDialogVisible = false">
          关 闭
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { bodyIndustryOptions, bodyIndustryLabel } from "@/utils/configure";

import SingleCollectionInfo from "@/views/coldLink/collectionInfo/singleCollectionInfo.vue";
import { groupArea } from "@/api/modules/enterprise";
export default {
  components: {
    SingleCollectionInfo,
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      // areaOptions: [
      //   {
      //     value: "320500",
      //     label: "苏州市",
      //   },
      //   {
      //     value: "320506",
      //     label: "吴中区",
      //   },

      //   {
      //     value: "320507",
      //     label: "相城区",
      //   },
      //   {
      //     value: "320505",
      //     label: "高新区",
      //   },
      //   {
      //     value: "320508",
      //     label: "姑苏区",
      //   },
      //   {
      //     value: "320509",
      //     label: "工业园区",
      //   },
      //   {
      //     value: "320581",
      //     label: "常熟市",
      //   },
      //   {
      //     value: "320582",
      //     label: "张家港市",
      //   },
      //   {
      //     value: "320583",
      //     label: "昆山市",
      //   },
      //   {
      //     value: "320584",
      //     label: "吴江区",
      //   },
      //   {
      //     value: "320585",
      //     label: "太仓市",
      //   },
      //   {
      //     value: "320592",
      //     label: "张家港保税区",
      //   },
      // ], //地区
      areaOptions: [],
      statusOptions: bodyIndustryOptions, //业态
      collectionOptions: [
        { label: "如期填报", value: "1" },
        { label: "延期补录", value: "2" },
        { label: "延期异常", value: "0" },
      ], //核酸采样状态
      selectedDate: [], //查询日期
      queryParam: {
        areaCode: "320500", //区域编码
        bodyindustry: "", //主体业态
        // licensenumber: null, //健康码 0异常 1无异常
        // entrytime: null, //行程码 0异常 1无异常
        // vaccination: null, //新冠疫苗接种 0未接种 1第一针 2第二针 3第三针
        status: "", //采样状态 0 未采样1如期采样 2延期补录 默认0
        pageIndex: 1, //开始页码
        pageSize: 20, //每页记录条数
        searchOne: "", //搜索(人员姓名/手机号码)
        searchTwo: "", //搜索(单位名称/社会信用代码)
        endDateCompletion: "", //结束时间(采样时间)
        startDateCompletion: "", //开始时间(采样时间)
        categoryOne: "", //
        categoryTwo: "", //
        tabelStatus: "0",
        samplingTypeStr: "0",
      }, //查询参数
      categoryStr: "",
      bodyindustryStr: "",
      exportLoading: false, //导出loading
      tableData: [],
      listTotal: 0, //列表总条数

      singleCollectionInfoDialogVisible: false, //单个采集信息弹窗
      singleCollectionInfo: "", //单个采集信息
      bodyindustryList: bodyIndustryLabel.list,
    };
  },
  created() {
    console.log(this.$route.query);
    this.queryParam.bodyindustry = this.$route.query.bodyindustry || "";
    this.queryParam.searchOne = this.$route.query.searchOne || "";
    this.queryParam.searchTwo = this.$route.query.searchTwo || "";
    this.queryParam.bodyindustryremarks =
      this.$route.query.bodyindustryremarks || "";
    this.queryParam.status = this.$route.query.status || "";
    this.bodyindustryStr = [
      this.$route.query.bodyindustry,
      this.$route.query.bodyindustryremarks,
    ].filter((x) => x);

    this.categoryStr = [
      this.$route.query.categoryOne,
      this.$route.query.categoryTwo,
    ].filter((x) => x);
    this.queryParam.categoryOne = this.$route.query.categoryOne || "";
    this.queryParam.categoryTwo = this.$route.query.categoryTwo || "";

    // this.queryParam.searchTwo = this.$route.query.search || "";
    this.queryParam.areaCode = this.$route.query.code || "320500";
    this.findAreaListNoParentByParentCode();
    this.selectedDate = [
      this.$route.query.startDateCompletion ||
        this.$moment().subtract(6, "days").format("YYYY-MM-DD"),
      this.$route.query.endDateCompletion ||
        this.$moment().format("YYYY-MM-DD"),
    ];
    this.queryParam.startDateCompletion = this.selectedDate[0];
    this.queryParam.endDateCompletion = this.selectedDate[1];

    // this.queryParam.startDateCompletion = this.selectedDate[0];
    //       this.queryParam.endDateCompletion = this.selectedDate[1];

    this.getCollectionList();
  },
  mounted() {},
  methods: {
    //获取区域列表
    findAreaListNoParentByParentCode() {
      groupArea({
        params: {
          areaCode: this.queryParam.areaCode,
        },
      }).then((res) => {
        // this.areaOptions = [res.data];
        console.log("获取区域列表", res.data);
        this.areaOptions.push({
          label: res.data.areaName,
          value: res.data.areaCode,
        });
        res.data.children.forEach((item1) => {
          this.areaOptions.push({
            label: item1.areaName,
            value: item1.areaCode,
          });
        });
      });
    },

    //选择日期
    handelChangeDate() {
      // if(){

      // }
      console.log(this.selectedDate);
      this.queryParam.startDateCompletion = this.selectedDate[0];
      this.queryParam.endDateCompletion = this.selectedDate[1];
    },

    //查询
    handleQuery() {
      this.queryParam.pageIndex = 1;
      this.getCollectionList();
    },

    //导出
    handelExport() {
      let params = JSON.parse(JSON.stringify(this.queryParam));
      if (params.status === "") {
        params.status = -1;
      }
      // if (params.bodyindustry) {
      //   params.bodyindustry =
      //     // params.bodyindustry[params.bodyindustry.length - 1];
      //     params.bodyindustry[0];
      // }

      this.$http.exportCollectionList(params).then((res) => {
        var blob = new Blob([res], {
          type: "application/vnd.ms-excel;charset=utf-8",
        });
        var downloadElement = document.createElement("a");
        var href = window.URL.createObjectURL(blob); //创建下载的链接
        downloadElement.href = href;
        downloadElement.download =
          "接触进口冷链食品核酸采集信息列表_" + new Date().getTime() + ".xlsx"; //下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象
      });
    },

    //查看
    handelView(row) {
      // this.$router.push({
      //   name: "singleCollectionInfo",
      //   params: {
      //     personCollectionInfo: row,
      //   },
      // });
      this.singleCollectionInfoDialogVisible = true;
      this.singleCollectionInfo = row;
    },

    //分页
    changeCurrentPage(val) {
      this.queryParam.pageIndex = val;
      this.getCollectionList();
    },

    //获取采样列表
    getCollectionList() {
      let params = JSON.parse(JSON.stringify(this.queryParam));
      if (params.status === "") {
        params.status = -1;
      }
      // if (params.bodyindustry) {
      //   params.bodyindustry =
      //     // params.bodyindustry[params.bodyindustry.length - 1];
      //     params.bodyindustry[0];
      // }

      this.$http.getCollectionList(params).then((res) => {
        const { code, data, msg } = res;
        this.tableData = data.list;
        this.listTotal = data.total;
      });
    },
    onCascaderChange(e) {
      if (e.length == 2) {
        this.queryParam.categoryOne = e[0];
        this.queryParam.categoryTwo = e[1];
      } else if (e.length == 1) {
        this.queryParam.categoryOne = e[0];
        this.queryParam.categoryTwo = "";
      } else {
        this.queryParam.categoryOne = "";
        this.queryParam.categoryTwo = "";
        this.categoryStr = "";
      }
    },
    onBodyIndustryStr(e) {
      if (e.length == 2) {
        this.queryParam.bodyindustry = e[0];
        this.queryParam.bodyindustryremarks = e[1];
      } else if (e.length == 1) {
        this.queryParam.bodyindustry = e[0];
        this.queryParam.bodyindustryremarks = "";
      } else {
        this.queryParam.bodyindustry = "";
        this.queryParam.bodyindustryremarks = "";
        this.bodyindustryStr = "";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.page {
  padding: 10px 20px;
  .btn {
    display: flex;
    justify-content: flex-end;
  }
  /deep/.el-dialog__body {
    padding: 0px 20px;
    padding-bottom: 70px;
  }
  .red {
    color: red;
  }
  .green {
    color: green;
  }
}
</style>
